import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

// import Style from './setAuthModal.css'
import { Modal, Form, Input } from 'antd'

const { Item } = Form
const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 16 }
}

class EditModal extends PureComponent {
  static propTypes = {
    visible: PropTypes.bool,
    onCancel: PropTypes.func,
    data: PropTypes.object,
    form: PropTypes.any,
    onOk: PropTypes.func
  }

  constructor (props) {
    super(props)
    this.state = {
    }
  }

  handleOk = () => {
    const { form, onOk } = this.props
    form.validateFields((err, values) => {
      if (!err) {
        console.log('EditModal -> handleOk -> values', values)
        onOk(values)
        this.handleCancel()
      }
    })
  }

  handleCancel = () => {
    const { form, onCancel } = this.props
    onCancel()
    form.resetFields()
  }

  render () {
    const { visible, form, data } = this.props
    const { getFieldDecorator } = form
    return (
      <Modal
        title='编辑'
        visible={visible}
        onCancel={this.handleCancel}
        onOk={this.handleOk}
      >
        <Form {...formItemLayout}>
          <Item label='角色名称'>
            {getFieldDecorator('name', {
              rules: [{ required: true, message: '请输入角色名称' }],
              initialValue: data.name || ''
            })(
              <Input placeholder='请输入' />
            )}
          </Item>
          <Item label='角色编号'>
            {getFieldDecorator('code', {
              rules: [{ required: true, message: '请输入角色编号' }],
              initialValue: data.code || ''
            })(
              <Input placeholder='请输入' />
            )}
          </Item>
          <Item label='角色描述'>
            {getFieldDecorator('remark', {
              // rules: [{ required: true, message: '请输入角色描述' }],
              initialValue: data.remark || ''
            })(
              <Input placeholder='请输入' />
            )}
          </Item>
        </Form>
      </Modal>
    )
  }
}

export default Form.create()(EditModal)
